<template>
  <div>
    <img src="static/images/exchange1.jpg" class="bg-img">
    <div class="home-item">
      <p class="rate-p">外汇牌价 EXCHANGE RATE</p>
      <div class="clock-item">
        <clock :radius="radius"></clock>
      </div>
      <div class="date-item">
        <p class="month">{{monthStr}}</p>
        <p class="date">{{dateStr}}</p>
        <p class="week">{{week}}</p>
        <p class="nongli">{{nongli}}</p>
      </div>
      <img src="static/images/logo1.png" class="logo">
      <table class="data-table">
        <thead>
          <tr>
            <td>
              <p>币种</p>
              <p>Currency</p>
            </td>
            <td>
              <p>单位</p>
              <p>Per</p>
            </td>
            <td>
              <p>现汇买入价</p>
              <p>ExchBid</p>
            </td>
            <td>
              <p>现汇卖出价</p>
              <p>ExchOffer</p>
            </td>
            <td>
              <p>现钞买入价</p>
              <p>CashBid</p>
            </td>
            <td>
              <p>现钞卖出价</p>
              <p>CashOffer</p>
            </td>
            <td>
              <p>中间价</p>
              <p>MidPrice</p>
            </td>
          </tr>
        </thead>
        <tbody>
          <transition
            v-for="(item, index) of currList"
            mode="out-in" appear
            :name="item.baseCurrency"
            :key="item.baseCurrency"
            :enter-active-class="'animated bounceInRight '+ 'animate' + index"
            :leave-active-class="'animated bounceOutLeft '+ 'animate' + index"
          >
            <tr :key="item.baseCurrency">
              <td class="first-td"><img :src="'static/images/country/' + item.baseCurrency + '.jpg'" class="banner-flag"><span>{{getCurrencyName(item.baseCurrency)}}</span></td>
              <td>{{item.per}}</td>
              <td>{{item.exchBid}}</td>
              <td>{{item.exchOffer}}</td>
              <td>{{item.cashBid}}</td>
              <td>{{item.cashOffer}}</td>
              <td>{{item.midPrice}}</td>
            </tr>
          </transition>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import Clock from './components/Clock'
import {showCal} from '@/assets/today.js'
import {httpHost} from '@/assets/requestData.js'
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    Clock
  },
  data () {
    return {
      dataList: [
        // {
        //   currency: '英镑1',
        //   per: '100',
        //   exchBid: '111.11',
        //   exchOffer: '11.21',
        //   cashBid: '11.31',
        //   cashOffer: '11.41',
        //   midPrice: '12.52'
        // },
        // {
        //   currency: '英镑2',
        //   per: '100',
        //   exchBid: '21.11',
        //   exchOffer: '21.21',
        //   cashBid: '21.31',
        //   cashOffer: '21.41',
        //   midPrice: '22.52'
        // },
        // {
        //   currency: '英镑3',
        //   per: '100',
        //   exchBid: '1.11',
        //   exchOffer: '1.21',
        //   cashBid: '1.31',
        //   cashOffer: '1.41',
        //   midPrice: '2.52'
        // },
        // {
        //   currency: '英镑4',
        //   per: '100',
        //   exchBid: '1.11',
        //   exchOffer: '1.21',
        //   cashBid: '1.31',
        //   cashOffer: '1.41',
        //   midPrice: '2.52'
        // },
        // {
        //   currency: '英镑5',
        //   per: '100',
        //   exchBid: '1.11',
        //   exchOffer: '1.21',
        //   cashBid: '1.31',
        //   cashOffer: '1.41',
        //   midPrice: '2.52'
        // },
        // {
        //   currency: '英镑6',
        //   per: '100',
        //   exchBid: '1.11',
        //   exchOffer: '1.21',
        //   cashBid: '1.31',
        //   cashOffer: '1.41',
        //   midPrice: '2.52'
        // },
        // {
        //   currency: '英镑7',
        //   per: '100',
        //   exchBid: '1.11',
        //   exchOffer: '1.21',
        //   cashBid: '1.31',
        //   cashOffer: '1.41',
        //   midPrice: '2.52'
        // },
        // {
        //   currency: '英镑8',
        //   per: '100',
        //   exchBid: '1.11',
        //   exchOffer: '1.21',
        //   cashBid: '1.31',
        //   cashOffer: '1.41',
        //   midPrice: '2.52'
        // },
        // {
        //   currency: '英镑9',
        //   per: '100',
        //   exchBid: '1.11',
        //   exchOffer: '1.21',
        //   cashBid: '1.31',
        //   cashOffer: '1.41',
        //   midPrice: '2.52'
        // },
        // {
        //   currency: '英镑10',
        //   per: '100',
        //   exchBid: '1.11',
        //   exchOffer: '1.21',
        //   cashBid: '1.31',
        //   cashOffer: '1.41',
        //   midPrice: '2.52'
        // },
        // {
        //   currency: '英镑11',
        //   per: '100',
        //   exchBid: '1.11',
        //   exchOffer: '1.21',
        //   cashBid: '1.31',
        //   cashOffer: '1.41',
        //   midPrice: '2.52'
        // },
        // {
        //   currency: '英镑12',
        //   per: '100',
        //   exchBid: '1.11',
        //   exchOffer: '1.21',
        //   cashBid: '1.31',
        //   cashOffer: '1.41',
        //   midPrice: '2.52'
        // }
      ],
      pageIndex: 1,
      timer: null,
      radius: 300,
      monthStr: '',
      dateStr: '',
      week: '',
      nongli: '',
      getDataTimer: null,
      writeDataTimer: null,
      firstVisit: true
    }
  },
  computed: {
    pageTotal () {
      if (this.dataList.length === 0) {
        return 0
      }
      if (this.dataList.length % 6 > 0) {
        return parseInt(this.dataList.length / 6) + 1
      } else {
        return parseInt(this.dataList.length / 6)
      }
    },
    currList () {
      if (this.pageIndex < this.pageTotal) {
        return this.dataList.slice((this.pageIndex - 1) * 6, this.pageIndex * 6)
      } else if (this.pageIndex === this.pageTotal) {
        if (this.dataList.length >= 6) {
          return this.dataList.slice(this.dataList.length - 6, this.dataList.length)
        } else {
          return this.dataList.slice((this.pageIndex - 1) * 6, this.dataList.length)
        }
      } else {
        return []
      }
    }
  },
  methods: {
    addIndex () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      let this_ = this
      this.timer = setTimeout(function () {
        if (this_.pageIndex < this_.pageTotal) {
          this_.pageIndex++
        } else {
          this_.pageIndex = 1
        }
        this_.addIndex()
      }, 30000)
    },
    getHttpData () {
      axios.get(httpHost + '/ibms/financial/getExchangeRate').then(this.getDataSucc)
      if (this.firstVisit) {
        // var this_ = this
        // setTimeout(function () {
        //   this_.getResDataFromC()
        //   this_.firstVisit = false
        //   this_.pageIndex = 1
        // }, 3000)
        this.getResDataFromC()
        this.firstVisit = false
        this.pageIndex = 1
      }
    },
    getDataSucc (res) {
      if (res.data) {
        var data = res.data
        if (data.flag === true) {
          var content = data.content
          window.external.WriteFile('currancy', JSON.stringify(content))
          // this.dataList = []
          // for (var i = 0; i < content.length; i++) {
          //   if (content[i].baseCurrency === 'CNY' || content[i].baseCurrency === 'XAU' || content[i].baseCurrency === 'XAG') {
          //     continue
          //   }
          //   var currency = {
          //     baseCurrency: content[i].baseCurrency,
          //     per: content[i].exchangeUnit,
          //     exchBid: content[i].consumerBidRemitQuote,
          //     exchOffer: content[i].consumerAskRemitQuote,
          //     cashBid: content[i].consumerBidCashQuote,
          //     cashOffer: content[i].consumerAskCashQuote,
          //     midPrice: content[i].mid
          //   }
          //   this.dataList.push(currency)
          // }
        }
      }
    },
    evil (fn) {
      var Fn = Function
      return new Fn('return ' + fn)()
    },
    getResDataFromC () {
      var content = this.evil(window.external.GetJsonContextWithJsonName('currancy'))
      this.dataList = []
      for (var i = 0; i < content.length; i++) {
        if (content[i].baseCurrency === 'CNY' || content[i].baseCurrency === 'XAU' || content[i].baseCurrency === 'XAG') {
          continue
        }
        var currency = {
          baseCurrency: content[i].baseCurrency,
          per: content[i].exchangeUnit,
          exchBid: content[i].consumerBidRemitQuote,
          exchOffer: content[i].consumerAskRemitQuote,
          cashBid: content[i].consumerBidCashQuote,
          cashOffer: content[i].consumerAskCashQuote,
          midPrice: content[i].mid
        }
        this.dataList.push(currency)
      }
    },
    getCData () {
      if (this.getDataTimer) {
        clearTimeout(this.getDataTimer)
      }
      var this_ = this
      this.getDataTimer = setTimeout(function () {
        // 取得数据
        this_.getResDataFromC()
        // 继续定时启动
        this_.getCData()
      }, 50000)
    },
    saveCData () {
      if (this.writeDataTimer) {
        clearTimeout(this.writeDataTimer)
      }
      var this_ = this
      this.writeDataTimer = setTimeout(function () {
        this_.getHttpData()
        this_.saveCData()
      }, 60000)
    },
    getCurrencyName (currency) {
      if (currency === 'KRW') {
        return '韩元'
      } else if (currency === 'USD') {
        return '美元'
      } else if (currency === 'THB') {
        return '泰铢'
      } else if (currency === 'NOK') {
        return '挪威克朗'
      } else if (currency === 'PHP') {
        return '菲律宾比索'
      } else if (currency === 'AED') {
        return '阿联酋迪拉姆'
      } else if (currency === 'TWD') {
        return '新台币'
      } else if (currency === 'SGD') {
        return '新加坡元'
      } else if (currency === 'KZT') {
        return '哈萨克斯坦坚戈'
      } else if (currency === 'SEK') {
        return '瑞典克朗'
      } else if (currency === 'NZD') {
        return '新西兰元'
      } else if (currency === 'DKK') {
        return '丹麦克朗'
      } else if (currency === 'GBP') {
        return '英镑'
      } else if (currency === 'CHF') {
        return '瑞士法郎'
      } else if (currency === 'CNY') {
        return ''
      } else if (currency === 'VND') {
        return '越南盾'
      } else if (currency === 'XAG') {
        return ''
      } else if (currency === 'JPY') {
        return '日元'
      } else if (currency === 'CAD') {
        return '加元'
      } else if (currency === 'AUD') {
        return '澳大利亚元'
      } else if (currency === 'MOP') {
        return '澳门币'
      } else if (currency === 'XAU') {
        return ''
      } else if (currency === 'EUR') {
        return '欧元'
      } else if (currency === 'HKD') {
        return '港币'
      } else if (currency === 'RUB') {
        return '俄罗斯卢布'
      }
    }
  },
  mounted () {
    this.getHttpData()
    this.saveCData()
    this.getCData()
    this.addIndex()
    var date = new Date()
    if (date.getMonth() < 10) {
      this.monthStr = date.getFullYear() + '.0' + (date.getMonth() + 1)
    } else {
      this.monthStr = date.getFullYear() + '.' + (date.getMonth() + 1)
    }
    if (date.getDate() < 10) {
      this.dateStr = '0' + date.getDate()
    } else {
      this.dateStr = date.getDate()
    }
    var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    this.week = weeks[date.getDay()]
    this.nongli = '农历' + showCal()
  }
}
</script>
<style lang="stylus" scoped>
  .banner-flag
    padding-right: 12px
  .bg-img,.home-item
    position: absolute
    left: 0
    top: 0
    width: 1920px
  .home-item
    height: 1080px
    .rate-p
      position: absolute
      left: 100px
      top: 100px
      font-size: 80px
      color: #fff
      mask-image: linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0))
    .clock-item
      position: absolute
      right: 10px
      top: 20px
    .logo
      position: absolute
      right: 40px
      bottom: 20px
    .date-item
      position: absolute
      right: 20px
      top: 400px
      width: 200px
      height: 300px
      display: flex
      flex-direction: column
      justify-content: flex-start
      align-items: center
      .month
        color: #fff
        font-size: 40px
      .date
        color: #fff
        font-size: 150px
        line-height: 130px
      .week
        color: #46a1ea
        font-size: 40px
        margin-top: 10px
        font-weight: bold
      .nongli
        color: #000
        font-size: 15px
        padding-top: 10px
        padding-bottom: 10px
        padding-left: 20px
        padding-right: 20px
        border-radius: 10px
        margin-top: 10px
        background-image: linear-gradient(right, rgba(119, 98, 90, .8), rgba(255, 255, 255, 1))
    .data-table
      position: absolute
      left: 0px
      top: 267px
      width: 1580px
      height: 700px
      >thead
        width: 100%
        >tr
          display: flex
          height: 102px
        >tr>td
          display: flex
          justify-content: center
          align-items: center
          flex-direction: column
          >p
            padding-bottom: 2px
            padding-top: 2px
            color: #122384
          >p:nth-child(1)
            font-size: 24px
          >p:nth-child(2)
            font-size: 15px
        >tr>td:nth-child(1)
          width: 346px
          display: flex
          align-items: center
          >img
            padding-left: 8px
            padding-right: 8px
          >span
            padding-left: 8px
        >tr>td:nth-child(2)
          width: 140px
        >tr>td:nth-child(3)
          width: 196px
        >tr>td:nth-child(4)
          width: 196px
        >tr>td:nth-child(5)
          width: 196px
        >tr>td:nth-child(6)
          width: 196px
        >tr>td:nth-child(7)
          width: 310px
      >tbody
        width: 100%
        color: #fff
        font-size: 28px
        >tr
          display: flex
          height: 100px
          >td
            display: flex
            justify-content: center
            align-items: center
        >tr>td:nth-child(1)
          width: 346px
          justify-content: flex-start
          >img
            margin-left: 80px
        >tr>td:nth-child(2)
          width: 140px
        >tr>td:nth-child(3)
          width: 196px
        >tr>td:nth-child(4)
          width: 196px
        >tr>td:nth-child(5)
          width: 196px
        >tr>td:nth-child(6)
          width: 196px
        >tr>td:nth-child(7)
          width: 310px
</style>
